<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>领养管理</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/pet.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="js/vue.js"></script>
    <script src="js/cdn.axios.js"></script>
</head>
<body>
<div id="root">
    <!-- 导航栏部分 -->
    <div class="nav">
        <h1 class="left">宠物管理系统</h1>
        <div class="right">
            <span class="user">欢迎管理员登录</span>
            <span><a href="index.html">登出</a></span>
        </div>
    </div>

    <!-- 内容部分 -->
    <div class="container">
        <!-- 左侧下拉菜单 -->
        <div class="leftnav">
            <div>后台管理</div>
            <ul>
                <li><a href="user.html">用户信息</a></li>
                <li><a href="admin.html">管理员信息</a></li>
                <li><a href="pet.html">宠物管理</a></li>
                <li><a href="adoptmanger.html">领养管理</a></li>
                <li><a href="agree.html">同意领养列表</a></li>
                <li><a href="disagree.html">不同意领养列表</a></li>
            </ul>
        </div>

        <!-- 右侧表单 -->
        <div class="rightform">
            <div class="form">
                <h1>猫狗领养申请的审核</h1>
                <table class="table">
                    <!-- 标题 -->
                    <caption>申请信息列表</caption>
                    <thead>
                    <tr>
                        <th>用户名称</th>
                        <th>宠物名字</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>地址</th>
                        <th>领养申请是否通过</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(adopt,i) in adopts">
                        <td>{{adopt.userName}}</td>
                        <td>{{adopt.pet_name}}</td>
                        <td>{{adopt.userPhone}}</td>
                        <td>{{adopt.userEmail}}</td>
                        <td>{{adopt.userAddr}}</td>
                        <td v-if="adopt.reqState==0">拒绝</td>
                        <td v-if="adopt.reqState==1">待审核</td>
                        <td v-if="adopt.reqState==2">同意</td>
                        <td><span class="agree" @click="agree(adopt.id)">同意   </span>
                            <span class="disagree" @click="disagree(adopt.id)">不同意</span></td>
                    </tr>
                    </tbody>
                </table>
            <!-- 分页功能 -->
            <div class="page">
                <div class="leftPage">
                    当前第<span>{{curPage}}</span>页
                    共<span>{{totalPage}}</span>页
                    <span>{{totalitem}}</span>条记录
                </div>
                <ul class="rightPage">
                    <li><span @click="getPage(1)">首页</span></li>
                    <li><span @click="getPage(curPage-1)">上一页</span></li>
                    <!-- 用于遍历查出来的数据 -->
                    <li v-for="index of totalPage"><span @click="getPage(index)">{{index}}</span></li>
                    <li><span @click="getPage(curPage+1)">下一页</span></li>
                    <li><span @click="getPage(totalPage)">尾页</span></li>
                </ul>
             </div>
            </div>
        </div>
    </div>
</div>
<script>
    const {createApp} = Vue;
    createApp({
        data() {
            return {
                adopts:new Map(),
                // 分页部分
                pageSize:2,
                // 总数据数
                totalitem:0,
                // 当前页
                curPage:0,
                // 总页数
                totalPage:0,
            }
        },
        created() {
            this.reset();
        },

        methods: {
            reset() {
                const that = this;
                axios({
                    method:"get",
                    url:"/adoptrequest/getallreq?pageSize="+this.pageSize+"&type=uncheck",
                }).then(function (res) {
                    console.log(res.data.page.pageContentList)
                    that.adopts = res.data.page.pageContentList;
                    that.totalitem = res.data.page.totalitem;
                    that.curPage = res.data.page.curPage;
                    that.totalPage = res.data.page.totalPage;
                    console.log(that.totalitem)
                    console.log(res.data.page);
                })
            },

            // 分页函数
            getPage(index) {
                const that = this;
                if(index===0) index=1;
                if(index>=this.totalPage) index=this.totalPage;
                axios({
                    method:"get",
                    url:"/adoptrequest/getpage?index="+index,

                }).then(function (res) {
                    that.adopts = res.data.page.pageContentList;
                    that.curPage = res.data.page.curPage;
                })
            },

            agree(id) {
                console.log(id);
                axios({
                    method:"get",
                    url:"/adoptrequest/acceptrequest?isPass=true&reqid="+id,
                }).then(function (res) {
                    console.log("success")
                    location.reload();
                })
            },

            disagree(id) {
                axios({
                    method:"get",
                    url:"/adoptrequest/acceptrequest?isPass=false&reqid="+id,
                }).then(function (res) {
                    console.log("success")
                    location.reload();
                })
            }

        }

    }).mount("#root")
</script>
</body>
</html>